<script setup>
  import PageLayout from '@/components/PageLayout.vue'
  import { useDynamicForm } from '@/hooks'
  import { ref, onMounted, useTemplateRef } from 'vue'
  import { getLibraryList, getRoomList, addLecture, getLectureList } from '@/api'
  import { ElMessage } from 'element-plus'

  const { openForm } = useDynamicForm()
  const form = useTemplateRef('form')

  const libraryList = ref([])
  const roomList = ref([])
  const lectureList = ref([])
  const libraryId = ref('')
  const classroomId = ref('')

  const lectureColumns = [
    { label: 'Id', prop: 'id' },
    { label: '讲座名称', prop: 'title' },
    { label: '开始时间', prop: 'startTime' },
    { label: '结束时间', prop: 'endTime' },
    { label: '讲座内容', prop: 'content' },
    { label: '讲师', prop: 'lecturer' },
    { label: '参与人数限制', prop: 'participantLimit' },
    { label: '地点', prop: 'location' },
    { label: '报名人数', prop: 'currentRegistrations' },
    { label: '备注', prop: 'remark' },
  ]

  const onClickAddLecture = () => {
    const options = {
      title: '新增讲座',
      fields: [
        {
          label: '讲座名称',
          key: 'title',
        },
        {
          label: '开始时间',
          key: 'startTime',
          type: 'datetime',
        },
        {
          label: '讲座时长',
          key: 'time',
          type: 'select',
          options: [
            { label: '30分钟', value: 30 },
            { label: '60分钟', value: 60 },
            { label: '90分钟', value: 90 },
            { label: '120分钟', value: 120 },
          ],
        },
        {
          label: '讲座内容',
          key: 'content',
        },
        {
          label: '讲师',
          key: 'lecturer',
        },
        {
          label: '参与人数限制',
          key: 'participantLimit',
        },
        {
          label: '备注',
          key: 'remark',
        },
      ],
      onConfirm: (data, { close, setLoading }) => {
        const id = classroomId.value
        const time = data.time * 60 * 1000
        const endTime = new Date(data.startTime.getTime() + time)

        const startTimeStr = data.startTime.toISOString().replace('T', ' ').slice(0, 19)
        const endTimeStr = endTime.toISOString().replace('T', ' ').slice(0, 19)

        const body = {
          ...data,
          classroomId: id,
          startTime: startTimeStr,
          endTime: endTimeStr,
        }

        setLoading(true)
        addLecture(body)
          .then(() => {
            ElMessage.success('新增讲座成功')
            close()
            handleGetLectureList()
          })
          .finally(() => setLoading(false))
      },
    }

    options.fields = options.fields.map(field => ({ ...field, required: true }))

    openForm(options)
  }

  const onChangeLibrary = () => {
    classroomId.value = ''
    if (libraryId.value) {
      handleGetRoomList()
    }
    handleGetLectureList()
  }

  const handleGetRoomList = () => {
    getRoomList({ libraryId: libraryId.value }).then(res => {
      roomList.value = res.data
        .filter(item => item.roomType === 0 && item.roomStatus === 1)
        .map(item => ({ label: item.name, value: item.id }))
    })
  }

  const handleGetLectureList = () => {
    const p = getLectureList().then(res => {
      let list = res.data
      if (libraryId.value) list = list.filter(item => item.libraryId === libraryId.value)
      if (classroomId.value) list = list.filter(item => item.classroomId === classroomId.value)
      lectureList.value = list
    })

    form.value.load(p)
  }

  onMounted(() => {
    getLibraryList().then(res => {
      libraryList.value = res.data.map(item => ({ label: item.name, value: item.id }))
    })
    handleGetLectureList()
  })
</script>

<template>
  <page-layout>
    <template #header>
      <el-button @click="handleGetLectureList">刷新</el-button>
      <el-select
        v-model="libraryId"
        placeholder="选择开办图书馆"
        style="width: 200px"
        @change="onChangeLibrary"
        clearable
      >
        <el-option v-for="item in libraryList" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select
        v-model="classroomId"
        placeholder="选择教室"
        style="width: 200px"
        @change="handleGetLectureList"
        clearable
      >
        <el-option v-for="item in roomList" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button type="success" @click="onClickAddLecture" :disabled="!libraryId || !classroomId">新增讲座</el-button>
    </template>

    <dynamic-table :data="lectureList" :columns="lectureColumns" ref="form">
      <template #location="{ row }"> {{ row.libraryName }}-{{ row.classroomName }} </template>
    </dynamic-table>
  </page-layout>
</template>

<style scoped lang="less"></style>
